<template>
  <page-main>
    <template #right>
      <!-- <el-button type="primary" icon="plus" @click="handleOperate(refAddEdit,{},'add')">新增</el-button> -->
      <el-button type="default" icon="download" @click="handleExport('订单','/admin/bill/export', {})">导出</el-button>
    </template>
    <search-form ref="refSearchForm" @confirm="handleSearch" />
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selectCheckbox"
          >
          <!-- <el-table-column type="selection" width="55" align="center" fixed /> -->
          <el-table-column label="订单ID" prop="billId" />
          <el-table-column label="用户ID" prop="userId" />
          <el-table-column label="订单类型" prop="cardId">
            <template #default="scope">
              {{proxy.$util.selectName(scope.row.type, optionData.billType)}}
            </template>
          </el-table-column>
          <el-table-column label="卡/活动名" prop="relationshipName">
            <!-- <template #default="scope">              
              <span v-if="scope.row.type == 'activities'">{{ scope.row.activitiesName }}</span>
              <span v-else>{{proxy.$util.selectName(scope.row.relationshipId, optionData.cardType)}}</span>
            </template> -->
          </el-table-column>
          <el-table-column label="金额(元)" prop="amount" />
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.status, optionData.billStatus)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" />
          <!-- <el-table-column label="操作" fixed="right" width="120" align="center">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refShowDetail,scope.row)"
              >查看</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination
          :current-page="pageData.current"
          :page-size="pageData.size"
          :page-sizes="pageData.pageSizes"
          :total="pageData.total"
          background
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="sizeChange"
        />
        <add-edit ref="refAddEdit" name="订单" @confirm="getList(dlgAddEdit.type == 'add'? 1 : pageData.current)"></add-edit> 
        <show-detail ref="refShowDetail" />
  </page-main>
</template>

<script setup lang="ts">
// import {onMounted, ref, reactive, provide,defineAsyncComponent, getCurrentInstance, ComponentInternalInstance} from 'vue';
let obj = {
  pageApi: '/admin/bill/page',
  deleteApi: '/admin/bill',
  primaryKey: 'billId',
  searchFixed:{},
}
import { useList } from '/@/assets/compositionFn/list';
let { dlgAddEdit, tableData, pageData, optionDataStore, getList, handleSearch, sizeChange, selectCheckbox, setDefaultCheckbox, handleOperate, handleDelete, handleDeleteMultiple, handleExport } = useList(obj);
const SearchForm = defineAsyncComponent(() => import('./components/SearchForm.vue'));
const AddEdit = defineAsyncComponent(() => import('./components/AddEdit.vue'));
const ShowDetail = defineAsyncComponent(() => import('./components/ShowDetail.vue'));
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
const refSearchForm = ref();
const refTable = ref();
const refAddEdit = ref();
const refShowDetail = ref();
const optionData:any = reactive({});

provide('optionData', optionData);
const getInitData = async ()=>{
  optionData.billStatus = await optionDataStore.getDictList('bill_status');
  optionData.billType = await optionDataStore.getDictList('bill_type');
  let cardType = await proxy.$request('get', '/admin/membershipCards/page', {current:1, size:100});
  optionData.cardType = proxy.$util.transformArray(cardType.records, 'cardId', 'cardName');
};
onMounted(async () => {
  await getInitData();
  getList();
  
})
</script>

<style>

</style>